<template>
    <!--审核成功-->
    <view class="container" v-if="status == 'NORMAL'">
        <view class="bindIcon">
            <image src="../../static/icon/success.png"></image>
            <text>绑定成功</text>
            <view class="tipText">
                注意：使用该机器进件其他支付机构需等待工作人员重新报备银联，预计2-24小时，请留意短信通知，未收到成功结果前请勿交易
            </view>
        </view>
        <view class="btnBox" @click="backIndex()">
            <button size="default" type="default"
                style="color:#ffffff;backgroundColor:rgba(255, 118, 0, 1);;borderColor:rgba(255, 118, 0, 1);"
                hover-class="is-hover">返回首页</button>
        </view>
    </view>
    <!--审核失败不兜底-->
    <view class="container" v-if="status == 'ABNORMAL' && reveal == false">
        <view class="bindIcon">
            <image src="../../static/icon/fail.png"></image>
            <text>您的注册请求未通过合利宝官方审核</text>
            <text>您可以尝试更换渠道重新注册</text>
        </view>
        <view class="btnBox" @click="changePassageway">
            <button size="default" type="default"
                style="color:#ffffff;backgroundColor:rgba(255, 118, 0, 1);;borderColor:rgba(255, 118, 0, 1);"
                hover-class="is-hover">更换渠道</button>
        </view>
        <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
            <view class="dialogContent">
                <view class="uni-list">
                    <radio-group @change="radioChange">
                        <label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
                            <view>{{ item.label }}</view>
                            <view>
                                <text>可注册</text>
                                <radio :value="item.value" :checked="index === current" :disabled="item.enabled == 0" />
                            </view>

                        </label>
                    </radio-group>
                </view>
                <view class="tipBox">
                    注意：使用该机器进件其他支付机构需等待工作人员重新报备银联，预计2-24小时，请留意短信通知，未收到注册成功的信息前请勿开机使用，感谢配合！
                </view>
                <view class="buttonBox">
                    <button class="mini-btn" type="primary" size="mini" @click="submitBtn()">确定</button>
                    <button class="mini-btn" type="default" size="mini" @click="cancelBtn()">取消</button>
                </view>
            </view>
        </uni-popup>
    </view>
    <!--审核失败兜底-->
    <view class="container" v-if="status == 'ABNORMAL' && reveal == true">
        <view class="bindIcon">
            <image src="../../static/icon/fail.png"></image>
            <text> 当前机器SN:{{ sn }}</text>
            <text>您的注册请求未通过官方审核，请联系您的业务员</text>
        </view>
    </view>
    <!--审核中-->
    <view class="container" v-if="status == 'WAIT' || status == 'AWAITING_CHANNEL_REVIEW'">
        <view class="bindIcon">

            <text>审核中</text>
            <view class="snBox">
                当前机器SN:{{ sn }}
            </view>
            <view class="tipText">
                注意：使用该机器进件其他支付机构需等待工作人员重新报备银联，预计2-24小时，请留意短信通知，未收到成功结果前请勿交易
            </view>
        </view>
        <view class="btnBox" @click="refreshBtn()">
            <button size="default" type="default"
                style="color:#ffffff;backgroundColor:rgba(255, 118, 0, 1);;borderColor:rgba(255, 118, 0, 1);"
                hover-class="is-hover">刷新</button>
        </view>
    </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import { showToast } from "@/utils/toast";
import { queryReport } from "@/api/common.js";
import { changeChannel, queryMerchants } from "@/api/mine.js"
// 报表查询条件 
let queryParams = ref({
    id: 1003,
    page: 1,
    size: 20,
    conditions: [
        // { code: "userId", operator: "eq", value: store.userInfo.id }
    ],
});
onLoad((val) => {
    // console.log("val-val", val)
    // status.value = val.status
    status.value = val.status || 'ABNORMAL'
    merchantId.value = val.id || '8fde1e66-9c1f-41d0-ba59-832278124f38'
    sn.value = val.sn || ''
    reveal.value = val.reveal

});
onShow(() => { });
let items = ref([])
let current = ref(0)
let status = ref()
let reveal = ref()
let popup = ref()
let seleceChannel = ref()
let seleceChannelName = ref()
let merchantId = ref()
let sn = ref()
let changePassageway = () => {
    passagewayList()
    popup.value.open()
}
let cancelBtn = () => {
    popup.value.close()
}
// 查询渠道列表
function passagewayList() {
    queryReport(queryParams.value).then((res) => {
        console.log("res-res", res)
        items.value = res.payload.result.map(el => {
            return {
                label: el.name,
                value: el.channel,
                enabled: el.enabled
            }
        })
        console.log("items.value", items.value)
    });
}
let submitBtn = () => {
    let params = {
        merchantId: merchantId.value,
        channel: seleceChannel.value
    }
    uni.showModal({
        title: '更换渠道',
        content: `您确定使用${seleceChannelName.value}渠道进件吗？`,
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
                changeChannel(params).then((res) => {
                    console.log("res-res", res)
                    if (res.code == 'SUCCESS') {
                        showToast("操作成功", "none");
                    }

                });
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
    });
}
let radioChange = (val) => {
    console.log("items.value", items.value)
    console.log("val-val", val)
    seleceChannel.value = val.detail.value
    let seleceName = items.value.filter(el =>
        el.value == val.detail.value
    )
    seleceChannelName.value = seleceName[0].label
    console.log("seleceChannelName", seleceChannelName.value)
}
// 刷新
let refreshBtn = () => {
    queryMerchants(merchantId.value)
        .then((res) => {
            console.log("res", res)
            let id = val || '4f58e18c-a414-4cf3-9ef1-65baa1b4cdd7'
            let status = res.payload.state || 'WAIT'
            let sn = res.payload.sn
            let reveal = res.reveal
            uni.navigateTo({
                url: `/pagesLogin/bindSuccess/index?id=${id}&status=${status}&sn=${sn}&reveal=${reveal}`,
            });
        })
        .catch((err) => {

        });
}
// 返回首页
let backIndex = () => {
    uni.switchTab({
        url: "/pages/index/index",
    });
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss">
page {
    background-color: #FFF !important;
}
</style>